
<script lang="ts">
import { defineComponent, defineEmits, reactive, watch, onBeforeUnmount } from "vue"

export default defineComponent({
    name: "JxtechImportDialog"
})
</script>
<script lang="ts" setup>
import jxtechImport from "./import.vue"

const emit = defineEmits<{
    (e: 'update:visible', val: Boolean): void
    (e: 'importSuccess', response: any, file: any, fileList: any): void
    (e: 'importError', err: any, file: any, fileList: any): void
}>()
const props = defineProps({
    // url
    action: {
        type: String,
        required: true
    },
    visible: {
        type: Boolean,
        defalut: false
    },
    tips: { //标题
        type: [String, Number]
    },

    description: { // 描述
        type: [String, Number]
    },

    extraData: { // 导入文件所需的额外数据
        type: Object
    }
})
watch(() => props.visible, (val) => {
    importDialogState.visible = val
})
const importDialogState = reactive({
    visible: props.visible,
    delayClose: (delay: number) => {
        setTimeout(() => {
            importDialogState.visible = false
        }, delay)
    },
    importSuccess: (response: any, file: any, fileList: any) => {
        emit("importSuccess", response, file, fileList)
        importDialogState.delayClose(600)
    },
    importError: (err: any, file: any, fileList: any) => {
        emit("importError", err, file, fileList)
    }
})
watch(() => importDialogState.visible, (val) => {
    emit("update:visible", val)
})

</script>
<template>
    <el-dialog v-model="importDialogState.visible" title="导入文件" destroy-on-close>
        <jxtech-import
            :action="props.action"
            :extra-data="props.extraData"
            :tip="props.tips"
            :description="props.description"
            @import-success="importDialogState.importSuccess"
            @import-error="importDialogState.importError"
        ></jxtech-import>
    </el-dialog>
</template>
<style lang="scss" scoped>
</style>